<!-- 表格行合并测试  -->
<template>
  <div class="app-container">
    <div>上个月日期:{{ monthly }}</div>
    <el-table
      v-loading="listLoading"
      :data="dataList"
      :span-method="objectSpanMethod"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <!-- <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column> -->
      <el-table-column label="种类" width="180">
        <template slot-scope="scope">
          {{ scope.row.category }}
        </template>
      </el-table-column>
      <el-table-column
        prop="itemname"
        label="城市"
        width="180"
      />
      <el-table-column
        prop="count"
        label="数量"
      />
    </el-table>
  </div>
</template>

<script>
import resmock from './mock/mock.js'
import mixins from '../mixins/mixins/list.js'
export default {
  mixins: [mixins],
  data() {
    return {
      dataList: [],
      listLoading: false,
      indexInfoList: []
    }
  },
  // 创建完成
  created() {
    this.getListData()
  },
  // 方法集合
  methods: {
    getListData() {
      const resData = resmock.getTableHebingList()
      this.dataList = resData || []
      // 获取每个类目下的条数
      const arr = []
      this.dataList.forEach(ele => {
        const firstIndex = this.dataList.findIndex(item => {
          return item.category === ele.category // 当category相同的时候，返回第一个相同的Index 赋值给 firstIndex
        })
        // console.log('firstIndex---', firstIndex)

        if (arr.findIndex(item => {
          return item.firstIndex === firstIndex
        }) === -1) {
          arr.push({
            length: this.dataList.filter(item => {
              return item.category === ele.category // 利用数组的filter方法，过滤出相同category的数组的长度。数组长度-即为跨多少行
            }).length,
            firstIndex: firstIndex // firstIndex 返回的是第一个catergory就满足的第一个Index,即为rowIndex开始于第几行。
          })
        }
      })
      // arr = new Set(arr)
      // console.log(JSON.stringify(arr))
      this.indexInfoList = arr // 得到的arr里面的内容：Array(3) // 0 : firstIndex : 0; length: 4  1: firstIndex: 4 length:5
      // console.log(arr)
    },
    // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const index = this.indexInfoList.findIndex(item => { // 遍历数组
          return item.firstIndex === rowIndex
        })
        if (index > -1) {
          return {
            rowspan: this.indexInfoList[index].length,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>
<style lang='' scoped>

</style>
